<template>
  <div style="display: flex; align-items: center; cursor:pointer">
    <a-avatar
        :size="props.avatarSize"
        :image-url="userInfo.userAvatar!=null?userInfo.userAvatar:'https://stone-answer-bucket-1328818493.cos.ap-chengdu.myqcloud.com/user_avatar/default_avatar.png'"
    />
    <a-typography-text :style="{marginLeft: '16px', fontSize: props.fontSize, fontWeight: 'bold'}">
      {{ userInfo.userName }}
    </a-typography-text>
  </div>
</template>

<script setup>
import {defineProps, onMounted, ref, watch} from "vue";
import {getUserVOByIdUsingGet} from "@/api/UserRequest";

const props = defineProps(['avatarSize', 'fontSize', 'userId']);
const userInfo = ref({
  userAvatar: '',
  userName: ''
});

onMounted(async () => {
  await fetchUserInfo();
});

async function fetchUserInfo() {
  if(props.userId > 0){
    const result = await getUserVOByIdUsingGet(props.userId);
    console.log("当前正在获取ID为：" + props.userId + "的用户信息。");
    userInfo.value = result.data.data;
  }
}

// 监听 userId 的变化
watch(() => props.userId, async (newUserId) => {
  if (newUserId > 0) {
    await fetchUserInfo();
  }
});

</script>

<style scoped>
</style>